{block name=body}
{* Define the function *} {function name=options_list level=0} 
	{foreach $opts as $opt}
		{if $ignore neq $opt.id}
			<option value="{$opt.id}" {if  $selected eq $opt.id}selected="selected"{/if}>{for $var=1 to $level}- {/for}{$opt.value}</option>
			{if count($opt.subs) > 0} {call name=options_list opts=$opt.subs level=$level+1 selected=$selected} {/if} 
		{/if}
	{/foreach} 
{/function}

<div class="row" id="member-details">
	<div class="col-sm-12">
		<h1>{$user.user_gname} {$user.user_surname}</h1>
		{$address.B.address_line1} <br />
		{$address.B.address_suburb}, {$address.B.address_state} {$address.B.address_postcode}<br />
		{$user.user_email}<br />
		{$address.B.address_telephone}<br />
	</div>
</div>
<div class="row top-margin" >
	<div class="col-sm-9">
		<div class="panel-group" id="accordion">

			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#description">
							描述
							<span class="glyphicon glyphicon-ok pull-right" id="checked-step5" {if $step lte 5}style="display:none;"{/if}></span>
							<span class="glyphicon glyphicon-unchecked pull-right" id="unchecked-step5" {if $step gt 5}style="display:none;"{/if}></span>
						</a>
					</h4>
				</div>
				<div id="description" class="panel-collapse collapse {if $step eq 5}in{/if} step5">
					<div class="panel-body">
						<form class="form-horizontal" id="customProduct-form" role="form" accept-charset="UTF-8" action="" method="post">
				      <input type="hidden" value="SetCustomProduct" name="action" /> 
				      <input type="hidden" name="formToken" id="formToken" value="{$token}" />
							<div class="form-group">
					      <label class="col-sm-3 control-label">类型*</label>
					      <div class="col-sm-9">
					      	<select  class="form-control required" name="paytype_id" id="paytype_id">
										<option value="">请选择</option> 
										{call name=options_list opts=$payment_types selected=$paytype_id}
									</select>
					      </div>
					    </div>
							<div class="form-group">
					      <label class="col-sm-3 control-label">描述*</label>
					      <div class="col-sm-9">
					      	<input type="text" value="{$customProduct.description}" class="form-control" id="prod_description" name="customProduct[description]" required>
					      	<select  class="form-control" name="debt_id" id="debt_id" style="display:none;">
										<option value="">请选择</option> 
										{if count($debts) gt 0}{foreach $debts as $d}{if $d.debt_amount gt 0}<option value="{$d.debt_id}" data-amount="{$d.debt_amount}" {if $d.debt_id eq $debt_id}selected="selected"{/if}>Order {$d.payment_transaction_no}</option>{/if}{/foreach}{/if}
									</select>
					      </div>
					    </div>
					    <div id="franchise-wrapper" class="form-group">
					      <label class="col-sm-3 control-label">加盟商*</label>
					      <div class="col-sm-9">
					      	<select  class="form-control" name="franchisee_id" id="franchisee_id">
										<option value="">总部</option> 
										{call name=options_list opts=$franchises selected=$franchisee_id}
									</select>
					      </div>
					    </div>
					    <div class="form-group">
					      <label class="col-sm-3 control-label">总额 (￥)*</label>
					      <div class="col-sm-9">
					      	<input type="text" value="{$customProduct.amount}" class="form-control double" id="prod_amount" name="customProduct[amount]"  onchange="CheckPartialPayment()" required>
					      </div>
					    </div>
					    <div class="form-group" id="nextpayment-wrapper" style="display:none;">
								<label class="col-sm-3 control-label">下一步支付*</label>
								<div class="col-sm-9">
									<input class="form-control dates datepicker nextpayment" type="text" value="{$nextpayment|date_format:"%Y-%m-%d"}" name="from-payment" id="from-payment" onchange="setDateValue('nextpayment',this.value);" >
									<input type="hidden" class="nextpayment" value="{$nextpayment}" name="nextpayment" id="nextpayment">
									<script>
										$(function() {
											$("#from-payment").datepicker({
									 			changeMonth : true,
									 			changeYear : true,
									 			dateFormat : "dd/mm/yy",
									 			minDate : new Date(),
									 			onSelect : function(selectedDate) {
									 				$("#nextpayment").val( convert_to_mysql_date_format(selectedDate) );
									 			}
									 		});
										});
									</script>
								</div>
							</div>
							<div class="text-center">
								<button id="step5-btn" type="submit" class="btn btn-default side-padding">下一步</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a data-toggle="collapse" data-parent="#accordion" href="#payment">
							<span id="step6-tab-name">支付</span>
							<span class="glyphicon glyphicon-ok pull-right" id="checked-step6" {if $step lte 6}style="display:none;"{/if}></span>
							<span class="glyphicon glyphicon-unchecked pull-right" id="unchecked-step6" {if $step gt 6}style="display:none;"{/if}></span>
						</a>
					</h4>
				</div>
				<div id="payment" class="panel-collapse collapse {if $step eq 6}in{/if} step6">
					<div class="panel-body">
						<div id="payment-wrapper" {if $step lte 5}style="display:none;"{/if}>
							<form class="form-horizontal" id="payment-form" role="form" accept-charset="UTF-8" action="" method="post">
					      <input type="hidden" value="PlaceOrder" name="action" /> 
					      <input type="hidden" name="formToken" id="formToken" value="{$token}" />
									<div class="not-trial" >
										<div class="form-group">
								      <label class="col-sm-3 control-label">总金额: </label>
								      <div class="col-sm-9">
								      	<div class="form-text-element">{$CURRENCY_SYMBOL}<span class="payment-amount">{$totals.total}</span> <span class="ccsurchage"> + 2% 信用卡附加费 = </span> <span class="ccsurchage"><b id="cctotal">￥0</b></span></div>
								      	<input style="display:inline-block" type="hidden" id="payment-amount" value="{$totals.total}" data-amount="{$totals.total}" class="cc-req form-control double payment-amount" name="cc[amount]">
								      </div>
								    </div>
								    <div class="form-group">
								      <label class="col-sm-3 control-label">支付类型: </label>
								      <div class="col-sm-3 form-text-element">
								      	<input type="radio" value="cc" class="radiovalidation" checked name="payment-method"> 信用卡
								      </div>
								      <div class="col-sm-3 form-text-element">
								      	<input type="radio" value="bt" class="radiovalidation" name="payment-method"> 银行转账
								      </div>
								    </div>
										<div id="bt-wrapper" style="display:none;">
		                    <div class="col-sm-12 text-center text-danger">
		                    	<!-- <b>Note: You're about to update this member's debt.<br>
		                    	Please confirm that the bank transfer was already made. Do not continue if the payment hasn't been verified.<br><br></b> -->
		                    </div>
		                </div>
										<div id="cc-wrapper" >
										 	<div class="form-group">
		                     <label class="col-sm-3 control-label" for="ccno">信用卡号*</label>
		                     <div class="col-sm-6">
		                       <input type="text" id="ccno" class="cc-req form-control" name="cc[number]" autocomplete="off" required/>
		                     </div>
		                   </div>
		                   <div class="form-group">
		                     <label class="col-sm-3 control-label" for="ccname">持卡人姓名*</label>
		                     <div class="col-sm-6">
		                       <input type="text" id="ccname" value="{$user.user_gname} {$user.user_surname}" class="cc-req form-control" name="cc[name]" autocomplete="off" required />
		                     </div>
		                   </div>
		                   <div class="form-group">
		                    <label class="col-sm-3 control-label" for="ccmonth">到期日期*</label>
				                <div class="col-sm-3">
		                      <select id="ccmonth" name="cc[month]" class="cc-select-req form-control required">
		                        <option value="">月</option>
		                        <option value="01">1 - Jan</option>
		                        <option value="02">2 - Feb</option>
		                        <option value="03">3 - Mar</option>
		                        <option value="04">4 - Apr</option>
		                        <option value="05">5 - May</option>
		                        <option value="06">6 - Jun</option>
		                        <option value="07">7 - Jul</option>
		                        <option value="08">8 - Aug</option>
		                        <option value="09">9 - Sep</option>
		                        <option value="10">10 - Oct</option>
		                        <option value="11">11 - Nov</option>
		                        <option value="12">12 - Dec</option>
		                      </select>
		                    </div>
			                  <div class="col-sm-3">
			                    <select id="ccyear" name="cc[year]" class="cc-select-req form-control required" >
		                       {assign var=thisyear value=$smarty.now|date_format:"%Y"} 
		                       {assign var=numyears value=$thisyear+20}
		                       <option value="">年</option>
		                       {for $year=$thisyear to $numyears}
		                         <option value="{$year}">{$year}</option> 
		                       {/for}
			                    </select>
			                  </div>
		                   </div>
		                   <div class="form-group">
		                     <label class="col-sm-3 control-label" for="cccsv">CSV*</label>
		                     <div class="col-sm-3">
		                       <input type="text" id="cccsv" name="cc[csv]" class="cc-req form-control" autocomplete="off" required />
		                     </div>
		                   </div>
		                  </div>
	                </div>
                  <div class=" col-sm-offset-3 error-alert" style="display:none;">
							    	<div class="alert alert-danger fade in ">
											<button class="close" aria-hidden="true" type="button" onclick="$(this).closest('.error-alert').fadeOut('slow');">&times;</button>
											<strong></strong>
										</div>
							    </div>
								<div class="text-center">
									<button id="step6-btn" type="submit" onclick="if($(this).closest('form').valid()){ $('#step6-btn').hide();$('#processing-div').show(); }" class="btn btn-default side-padding">Place Order</button>
									<div style="display:none;" id="processing-div" class="btn btn-default side-padding">Processing...</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <!--col-sm-9-->
	<div class="col-sm-3">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Summary</h4>
				</div>
				<div class="panel-body" id="cart-summary">
						{include file='shopping-cart.tpl'}
				</div>
				<div class="panel-footer">
					<form class="form-horizontal" id="reset-cart-form" method="post">
							<input type="hidden" value="ResetCart" name="action" id="action" /> 
							<input type="hidden" name="formToken" value="{$token}" />
							<button type="button" onclick="if (confirm('Do you want to reset the shopping cart?')) { $('#reset-cart-form').submit(); }" class="btn btn-default">Reset</button>
					</form>
				</div>
			</div>		
	</div>
</div>
{/block}

{block name=tail}
<script type="text/javascript">


$(document).ready(function(){

	CheckSelectedOptions()
	
	{if $step eq 6} CheckPaymentMethod(); CheckPartialPayment(); {else} if($('#debt_id').val()) $('#debt_id').trigger('change'); {/if}
		 	
	$('#customProduct-form').validate({
		onkeyup: false,
	});

 	$('#payment-form').validate({
		onkeyup: false
	}); 

 	$('#reset-cart-form').validate();
	   
	$('.double').rules("add", {
     number: true
   });

	$('#ccno').rules("add", {
     creditcard : true,
   });
   
   $('#cccsv').rules("add", {
     digits: true,
     minlength: 3
   });

   $('#paytype_id').change(function(){
	   CheckSelectedOptions();
	 });

	
});

$('#debt_id').change(function(){
	   $('#prod_description').val( $('#debt_id option:selected').text() );
	   $('#prod_amount').val( $('#debt_id option:selected').attr('data-amount') );
	 });

$(".radiovalidation").change(function() {
		if($(this).val() == 'bt' && $('#paytype_id').val() == '-2'){
			$('#bt-wrapper').show('slow');
		}else{
			$('#bt-wrapper').hide();
		}
	});
	
function DisplayPartialPaymentElements(COND){
	if(COND == true){
		$('#franchise-wrapper').val('').hide('slow');
 	$('#prod_description').hide('slow');
 	$('#debt_id').addClass('required').show('slow');
	}else{
		$('#franchise-wrapper').show('slow');
		$('#debt_id').removeClass('required').hide('slow');
		$('#prod_description').val('').show('slow');
	}
}

function CheckSelectedOptions(){
	 switch($('#paytype_id').val()){
		 case '-1': // Other payments
			 	DisplayPartialPaymentElements(false);
				break;

			case '-2': // Partial payment
				DisplayPartialPaymentElements(true);
				break;
				
		 	case '-3': // Birthday Party
			 	DisplayPartialPaymentElements(false);
			 	break;

			default:
			 	DisplayPartialPaymentElements(false);
	 }
}

function CheckPartialPayment(){
	var full = parseFloat($('#debt_id option:selected').attr('data-amount')).toFixed(2);
	var charge = parseFloat($('#prod_amount').val()).toFixed(2);
	if($('#paytype_id').val() == '-2' && full != charge){
		$('#nextpayment-wrapper').show('slow');
		$('#from-payment').attr('required','required');
	}else{
		$('#nextpayment-wrapper').hide('slow');
		$('.nextpayment').val('');
		$('#from-payment').removeAttr('required');
	}
}

</script>

{/block}
